<template>
    <div>
        <!-- 卡片区域开始 -->
        <div class="card">
            学习计划表
        </div>
        <!-- 提交区域 -->
        <div class="card-body">
            <form @submit.prevent="add">
                <div class="row g-4">
                    <div class="col-auto">
                        <div class="input-group mb-3">
                            <span class="input-group-text" id="basic-addon1">学习科目</span>
                            <input type="text" class="form-control" placeholder="请输入学习科目" v-model.trim="subject">
                        </div>
                    </div>
                    <div class="col-auto">
                        <div class="input-group mb-3">
                            <span class="input-group-text" id="basic-addon1">学习内容</span>
                            <textarea type="text" class="form-control" placeholder="请输入学习内容" v-model.trim="content"
                                :style="{ height: '32px' }" />
                        </div>
                    </div>
                    <div class="col-auto">
                        <div class="input-group mb-3">
                            <span class="input-group-text" id="basic-addon1">学习地点</span>
                            <select class="form-select form-select-sm" v-model="selectOption">
                                <option v-for="option in options" :key="option.placeCode" :value="option.place">{{
                                    option.place }}</option>
                            </select>
                        </div>
                    </div>
                    <div class="col-auto">
                        <button type="submit" class="btn btn-primary">添加</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</template>
<script setup>
import { ref } from 'vue'
// 添加功能
let subject = ref('') // 输入的科目
  let content = ref('') // 输入的内容
  let nextId = ref('') // 下一个id
  let selectOption = ref('自习室') // 用户选择的学习地点
  let options = ref([
    {placeCode: 0, place: '自习室'},
    {placeCode: 1, place: '图书馆'},
    {placeCode: 2, place: '宿舍'}
  ])

  subject.value = ''
    content.value = ''
    selectOption.value = '自习室'
</script>
